<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    <style class="cp-pen-styles">
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        overflow: hidden;
        opacity: .3;
    }
    </style>
</head>

<body>
    <script src="https://cdn.bootcss.com/three.js/90/three.min.js"></script>
    <!-- <script src="/page/lib/OrbitControls.js"></script> -->
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.bootcss.com/tween.js/17.2.0/Tween.js"></script>

    <script>
    function init() {
        var ismobile = !1;

        /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ? ismobile = !0:"";

        // 获取浏览器窗口的宽高，后续会用
        var width = window.innerWidth
        var height = window.innerHeight

        // 创建一个场景
        var scene = new THREE.Scene()

        // 创建一个具有透视效果的摄像机
        var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1800)

        // 设置摄像机位置，并将其朝向场景中心
        camera.position.x = 10;
        camera.position.y = 100;
        camera.position.z = 800;
        camera.lookAt(scene.position)

        // 创建一个 WebGL 渲染器，Three.js 还提供 <canvas>, <svg>, CSS3D 渲染器。
        var renderer = new THREE.WebGLRenderer({
            antialias: true
        })

        // 设置渲染器的清除颜色（即绘制下一帧前填充的颜色）和输出的 canvas 的尺寸
        renderer.setClearColor(0xffffff)
        renderer.setSize(width, height)

        // 将渲染器的输出（此处是 canvas 元素）插入到 body
        document.body.appendChild(renderer.domElement)

        // 初始化摄像机插件（用于拖拽旋转摄像机，产生交互效果）
        var orbitControls = new THREE.OrbitControls(camera)
        orbitControls.autoRotate = true

        //在网页上显示坐标系，其中坐标系的长度为6
        var axisHelper = new THREE.AxesHelper(200);
        // scene.add(axisHelper);

        var spriteMaterial = new THREE.SpriteMaterial({ "color": new THREE.Color(0x000000) })
        var spriteMaterial2 = new THREE.SpriteMaterial({
            map: program()
        })

        //画点
        function program() {
            var canvas = document.createElement('canvas');
            canvas.width = 64;
            canvas.height = 64;

            var context = canvas.getContext('2d');
            var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
            gradient.addColorStop(0, 'rgba(1,1,1,1)');
            gradient.addColorStop(.9, 'rgba(1,1,1,.9)');
            gradient.addColorStop(1, 'rgba(255,255,255,0)');

            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);

            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        };

        // 循环创建多个 THREE.Sprite 对象，该对象始终面向摄像机
        // l粒子数
        var tween;
        var loader = new THREE.JSONLoader();
        // loader.load('./marmelab.json', function (geometry, materials) {
        // loader.load('./mx/cpac5.json', function (geometry, materials) {
        // var Djson = ["//game.gtimg.cn/images/up/act/a20170301pre/js/obj/cpgame3.json", "//game.gtimg.cn/images/up/act/a20170301pre/js/obj/cpac5.json", "//game.gtimg.cn/images/up/act/a20170301pre/js/obj/cpbook2.json", "//game.gtimg.cn/images/up/act/a20170301pre/js/obj/cpmovie4.json", "//game.gtimg.cn/images/up/act/a20170301pre/js/obj/cpkv3.json", "//game.gtimg.cn/images/up/act/a20170301pre/js/obj/qr.json"];
        var Djson =["./mx/cpgame3.json",
            "./mx/cpac5.json",
            "./mx/cpbook2.json",
            "./mx/cpmovie4.json",
            "./mx/cpkv3.json",
            "./mx/qr.json"];
        loader.load(Djson[5], function(geometry, materials) {
        // loader.load('http://game.gtimg.cn/images/up/act/a20170301pre/js/obj/cpac5.json', function(geometry, materials) {
        // loader.load('./mx/qr.json', function (geometry, materials) {

            // console.log("粒子", geometry, materials)
            console.log("粒子2", geometry.vertices)
            geometry.vertices.forEach(function(child, index) {
                var sprite = new THREE.Sprite(spriteMaterial2)

                var Tpoint = { "point": sprite, "x": 0, "y": 0, "z": 0 };
                var Epoint = { "x": child.x, "y": child.y, "z": child.z };
                tween = new TWEEN.Tween(Tpoint)
                    .to(Epoint, 500)
                    .delay(Math.random() * 100)
                    .easing(TWEEN.Easing.Quartic.Out)
                    .onUpdate(function(pp) {
                        // pp.point.position.addScaledVector(pp,100)
                        pp.point.position.set(pp.x * 200, pp.y * 200, pp.z * 200)
                        pp.point.scale.addScalar(ismobile?.8:.1)
                        scene.add(pp.point)
                    }).start();


                    if(geometry.vertices.length == index+1){
                        animate();
                    }


            })

            // 异步执行
            
            // animate()

        });


        function animate(time) {
            // 渲染，即摄像机拍下此刻的场景
            // renderer.render(scene, camera)
            // requestAnimationFrame(render)

            renderer.render(scene, camera)
            var id = requestAnimationFrame(animate);
            var result = TWEEN.update(time);
            // if (!result) cancelAnimationFrame(id);
        }

    }
    init()
    </script>
</body>

</html>